<div class="clearfix attr-pool-panel">
  <div>
    <span>类目</span>
    <ng-tree [option]="option" (onChangeCat)="handleUpdated($event)"></ng-tree>
  </div>
  <div class="pt10 pb10">
    <span>类型</span>
    <mat-radio-group [(ngModel)]="shopType" class="mat-primary">
      <mat-radio-button value="" [checked]="shopType==''" color="primary">全网</mat-radio-button>
      <mat-radio-button value="C店" [checked]="shopType=='C店'" color="primary">淘宝</mat-radio-button>
      <mat-radio-button value="商城" [checked]="shopType=='商城'" color="primary">天猫</mat-radio-button>
      <mat-radio-button value="天猫国际" [checked]="shopType=='天猫国际'" color="primary">天猫国际</mat-radio-button>
      <mat-radio-button value="全球购" [checked]="shopType=='全球购'" color="primary">全球购</mat-radio-button>
    </mat-radio-group>
  </div>
  <div class="attrPoolBox pt10" style="position: relative;" [hidden]="!cat">
    <div class="clearfix white icon-tag-box" fixed-top>
      <div class="icon-tag" style="color: #f40;">已选择:</div>
      <div class="icon-tag" *ngFor="let prop of selected_props;let $index = index;">
        <a class="result" href="javascript:;" [title]="prop.key+':'+prop.name">
            <span>{{prop.key}}</span> : <span class="word-limit">{{prop.name}}</span>
          </a>
        <i class="fa fa-close cp" (click)="unselect($index)"></i>
      </div>
      <div class="right">
        <a mat-raised-button color="primary" (click)="submit()" [disabled]="selected_props.length==0">确定</a>
      </div>
    </div>
    <div class="group">
      <div class="group-item" *ngFor="let d of pools;let $index=index;" [ngClass]="{'expand-mode':d.showall}" [hidden]="!d.propertys_show">
        <div class="head">
          <span class="title" [title]="d.propertyKey" [matTooltip]="d.propertyKey">{{d.propertyKey}}</span>
        </div>
        <div class="body">
          <div class="body-item clearfix">
            <a class="item" href="javascript:;" *ngFor="let pro of d.propertys;let $index=index;" (click)="select(pro)" [hidden]="!pro.show" [ngClass]="{'propSelected':pro.selected}">{{pro.name}}{{'('+ pro.value + '%)'}}</a>
          </div>
        </div>
        <div class="foot">
          <a href="javascript:;" class="cp more-foot" *ngIf="d.propertys.length > 10" (click)="expand(d)">{{d.showall ? '收起' : '更多'}}</a>
        </div>
      </div>
      <div *ngIf="pools.length==0">
        暂无属性
      </div>
    </div>
    <ngx-busy [busy]="xhrEvent"></ngx-busy>
  </div>
</div>
